<template>
  <basic-container>
    <el-tabs v-model="activeName">
      <el-tab-pane label="项目上传" name="project-upload">
        <avue-form :option="option"
                   ref="refForm"
                   v-model="form"
                   @submit="handleSubmit">
        </avue-form>
      </el-tab-pane>
    </el-tabs>
  </basic-container>
</template>
<script>
import { add } from '@/api/business/project';
import { dict } from '@/api/system/dict';

export default {
  name: 'upload',
  data() {
    return {
      activeName: 'project-upload',
      option: {
        gutter: 100,
        column: [
          {
            label: '项目名称',
            span: 10,
            dataType: 'string',
            prop: 'projectName',
            rules: [
              { required: true, message: '请输入项目名称', trigger: 'blur' }
            ]
          },
          {
            label: '项目类型',
            span: 10,
            prop: 'projectType',
            type: 'select',
            dataType: 'number',
            dicData: [],
            dicUrl: `${dict.dictionaryUrl}?code=project_type`,
            props: {
              label: 'dictValue',
              value: 'dictKey'
            },
            rules: [
              { required: true, message: '请选择项目类型', trigger: 'blur' }
            ]
          },
          {
            label: '合同金额',
            span: 10,
            type: 'input',
            append: '万元',
            dataType: 'string',
            prop: 'contractAmount',
            rules: [
              { required: true, message: '请输入合同金额', trigger: 'blur' },
              { pattern: '^(?!0(\\.0{1,2})?$)[1-9]\\d{0,9}(\\.\\d{1,2})?$', message: '请输入有效的合同金额' }
            ]
          },
          {
            label: '项目状态',
            span: 10,
            row: true,
            prop: 'projectStatus',
            type: 'select',
            dataType: 'number',
            value: 0,
            dicData: [
              { label: '在建', value: 0 },
              { label: '竣工', value: 1 }
            ],
            rules: [
              { required: true, message: '请选择项目状态', trigger: 'blur' }
            ]
          },
          {
            label: '签订时间',
            prop: 'signTime',
            type: 'date',
            span: 10,
            format: 'YYYY-MM-DD',
            valueFormat: 'YYYY-MM-DD',
            rules: [{
              required: true,
              message: '请选择签订时间',
              trigger: 'blur'
            }]
          },
          {
            label: '投资总金额',
            labelWidth: 100,
            span: 10,
            row: true,
            type: 'number',
            dataType: 'number',
            controls: false,
            prop: 'investment',
            min: 0,
            rules: [
              { required: true, message: '请输入投资总金额', trigger: 'blur' },
              { pattern: '^(?!0(\\.0{1,2})?$)[1-9]\\d{0,9}(\\.\\d{1,2})?$', message: '请输入有效的投资总金额' }
            ]
          },
          {
            label: '合同文件',
            span: 10,
            prop: 'contractReport',
            type: 'upload',
            dataType: 'json',
            props: {
              label: 'name',
              value: 'url'
            },
            propsHttp: {
              res: 'data',
              url: 'link',
              name: 'originalName'
            },
            multiple: true,
            listType: 'text',
            action: '/api/civil-resource/oss/endpoint/put-file'
          },
          {
            label: '竣工报告',
            span: 10,
            prop: 'completeReport',
            type: 'upload',
            dataType: 'json',
            props: {
              label: 'name',
              value: 'url'
            },
            propsHttp: {
              res: 'data',
              url: 'link',
              name: 'originalName'
            },
            multiple: true,
            listType: 'text',
            action: '/api/civil-resource/oss/endpoint/put-file'
          },
          {
            label: '审图报告',
            span: 10,
            prop: 'drawReport',
            type: 'upload',
            dataType: 'json',
            props: {
              label: 'name',
              value: 'url'
            },
            propsHttp: {
              res: 'data',
              url: 'link',
              name: 'originalName'
            },
            multiple: true,
            listType: 'text',
            action: '/api/civil-resource/oss/endpoint/put-file'
          },
          {
            label: '其他上传',
            span: 10,
            prop: 'otherReport',
            type: 'upload',
            dataType: 'json',
            props: {
              label: 'name',
              value: 'url'
            },
            propsHttp: {
              res: 'data',
              url: 'link',
              name: 'originalName'
            },
            multiple: true,
            listType: 'text',
            action: '/api/civil-resource/oss/endpoint/put-file'
          },
          {
            label: '项目简况',
            prop: 'explanation',
            span: 10,
            minRows: 5,
            type: 'textarea',
            hide: true,
            maxlength: 300,
            showWordLimit: true
          }
        ]
      },
      form: {}
    };
  },
  methods: {
    handleSubmit(form, done) {
      add(form).then(res => {
        if (res.data.success) {
          this.$message({
            type: 'success',
            message: '新增成功!'
          });
          // 清空数据
          this.$refs.refForm.resetFields();
        } else {
          this.$message({
            type: 'error',
            message: res.data.msg
          });
        }
        done();
      }, error => {
        console.log(error);
        done();
      });
    }
  }
};
</script>

<style scoped>

</style>
